<template>
	<div class="ratings" ref="ratingWrapper">
		<div class="rating-wrapper">
			<div class="rating-header">
				<div class="rating-left">
					<h1 class="score">{{seller.score}}</h1>
					<div class="title">综合评分</div>
					<div class="rating">高于周边商家{{seller.rankRate}}%</div>
				</div>
				<div class="rating-right">
					<div class="score-wrapper">
						<span class="title">商品评分</span>
						<star :score="seller.foodScore" :size="36" class="star"></star>
						<span class="score">{{seller.foodScore}}</span>
					</div>
					<div class="server-wrapper">
						<span class="title">服务评分</span>
						<star :score="seller.serviceScore" :size="36" class="star"></star>
						<span class="score">{{seller.serviceScore}}</span>
					</div>
					<div class="time-wrapper">
						<span class="title">送达时间</span>
						<span class="text">{{seller.deliveryTime}}分钟</span>
					</div>
				</div>
			</div>
			<split></split>
			<ratingSelect class="ratingSelect" :ratingType="ratingType" :onlyContent="onlyContent" :ratings="ratings"></ratingSelect>
			<div class="rating-content">
				<ul>
					<li v-if="needShow(rating.rateType,rating.text)" v-for="rating in ratings" class="rating-item border-1px">
						<div class="avatar">
							<img :src="rating.avatar" width="28px" height="28px"/>
						</div>
						<div class="content">
							<h3 class="name">{{rating.username}}</h3>
							<div class="star-wrapper">
								<star :size="24" :score="rating.score" class="star"></star>
								<span class="deliveryTime">
									{{rating.deliveryTime}}分钟送达
								</span>
							</div>
							<div class="text">{{rating.text}}</div>
							<div class="recommend">
								<span :class="rating.rateType==0?'icon-thumb_up':'icon-thumb_down'"></span>
								<span v-for="item in rating.recommend" class="item">
									{{item}}
								</span>
							</div>
							<div class="time">{{rating.rateTime | dateFormat}}</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<shopCart :minPrice="seller.minPrice" :deliveryPrice="seller.deliveryPrice"></shopCart>
	</div>
</template>

<script>
	const POSITIVE=0//推荐
	const NEGATIVE=1//吐槽
	const ALL=2 //全部
	import BScroll from 'better-scroll'
	import star from '@/components/star.vue'
	import split from '@/components/split.vue'
	import ratingSelect from '@/components/ratingSelect.vue'
	import axios from 'axios'
	import {formatDate} from '@/common/js/date.js'
	import shopCart from '@/components/ShopCart.vue'
	export default{
		name:'ratings',
		data(){
			return{
				ratingType:ALL,
				onlyContent:false,
				ratings:[]
			}
		},
		filters:{
			dateFormat(time){
				var date=new Date(time)
				return formatDate(date,'yyyy-MM-dd hh:mm')
			}
		},
		created(){
			axios.get('/data.json').then(res=>{
				//console.log(res.data)
				this.ratings=res.data.ratings
				this.$nextTick(()=>{
					this.scroll=new BScroll(this.$refs.ratingWrapper,{
						click:true
					})
				})
			})
			this.$root.eventHub.$on('selectType',(type)=>{
				this.ratingSelectType(type)
			})
			this.$root.eventHub.$on('selectContent',(content)=>{
				this.contentToggle(content)
			})
		},
		methods:{
			ratingSelectType(type){
				this.ratingType=type
			},
			contentToggle(content){
				this.onlyContent=content
			},
			needShow(type,text){
				if(this.onlyContent&&!text){
					return false
				}
				if(this.ratingType==ALL){
					return true
				}else{
					return this.ratingType==type
				}
			}
		},
		props:{
			seller:{
				type:Object
			}
		},
		components:{
			star,
			split,
			ratingSelect,
			shopCart
		}
	}
</script>

<style lang="scss">
	@import  '../common/style/mixin.scss';
	.ratings{
		position: absolute;
		top: 176px;
		left: 0;
		bottom: 48px;
		overflow: hidden;
		.rating-header{
			display: flex;
			padding: 18px 0;
			.rating-left{
				flex: 0 0 137px;
				width: 137px;
				text-align: center;
				padding: 6px 0;
				border-right: 1px solid rgba(7,17,27,0.1);
				.score{
					font-size: 24px;
					line-height: 28px;
					color: rgb(255,153,0);
				}
				.title{
					font-size: 12px;
					line-height: 12px;
					font-weight: 700;
					color: rgb(7,17,27);
					margin: 6px 0 8px 0;
				}
				.rating{
					font-size: 10px;
					line-height: 10px;
					font-weight: 200;
					color: rgba(7,17,27,0.7);
				}
			}
			.rating-right{
				margin: 0 24px;
				padding: 6px 0;
				flex:1;
				.server-wrapper{
					margin: 8px 0;
				}
				.title{
					display: inline-block;
					font-size: 12px;
					font-weight: 200;
					line-height: 18px;
					color: rgb(7,17,27);
					margin-right: 12px;
					vertical-align: top;
				}
				.star{
					display: inline-block;
					vertical-align: top;
				}
				.score{
					font-size: 12px;
					line-height: 18px;
					color: rgb(255,153,0);
					margin-left: 12px;
				}
				.text{
					font-size: 12px;
					line-height: 18px;
					color: rgb(147,153,159);
				}
			}
		}
		.ratingSelect{
			margin-top: 18px;
		}
		.rating-content{
			padding: 18px;
			.rating-item{
				display: flex;
				padding-bottom: 18px;
				margin-bottom: 18px;
				@include border-1px(rgba(7,17,27,0.1));
				&:last-child{
					@include  border-none()
				}
				.avatar{
					flex:0 0 28px;
					width: 28px;
					margin-right: 12px;
					vertical-align: top;
					img{
						border-radius: 50%;
					}
				}
				.content{
					flex: 1;
					vertical-align: top;
					position: relative;
					.name{
						font-size: 10px;
						color: rgb(7,17,27);
						line-height: 12px;
						margin-bottom: 4px;
					}
					.star-wrapper{
						margin-bottom: 6px;
						font-size: 0;
						.star{
							display: inline-block;
							vertical-align: top;
							margin-right: 6px;
						}
						.deliveryTime{
							font-size: 10px;
							line-height: 12px;
							color: rgb(147,153,159);
							font-weight: 200;
						}
					}
					.text{
						font-size: 12px;
						line-height: 18px;
						color: rgb(7,17,27);
						margin-bottom: 8px;
					}
					.recommend{
						line-height: 1.5em;
						.icon-thumb_up,.icon-thumb_down{
							font-size: 12px;
							line-height: 16px;
						}
						.icon-thumb_up{
							color: rgb(0,160,220);
						}
						.icon-thumb_down{
							color: rgb(183,187,191);
						}
						.item{
							margin-left: 8px;
							border: 1px solid rgba(7,17,27,0.1);
							border-radius: 2px;
							padding: 2px 6px;
							font-size: 9px;
							color: rgb(147,153,159);
						}
					}
					.time{
						position: absolute;
						top: 0;
						right: 0;
						font-size: 10px;
						line-height: 12px;
						color: rgb(147,153,159);
					}
				}
			}
		}
	}
</style>
